<template>
  <div>
    <!-- 通过 v-if 动态加载不同的组件 -->
    <DesktopView v-if="isDesktop" />
    <MobileView v-else />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import DesktopView from '../../view/DesktopView.vue';
import MobileView from '../../view/MobileView.vue';
import {RouterView} from "vue-router";


// 存储设备类型，默认为手机端
const isDesktop = ref(false);

// 检查设备类型（桌面端或手机端）
const checkDeviceType = () => {
  isDesktop.value = window.innerWidth >= 768; // 可以调整这个值来适配不同的设备
};

onMounted(() => {
  // 初次加载时检查设备类型
  checkDeviceType();

  // 监听窗口大小变化，动态更新设备类型
  window.addEventListener('resize', checkDeviceType);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听器
  window.removeEventListener('resize', checkDeviceType);
});
</script>

<style scoped>
/* 如果需要，可以添加一些通用样式 */
</style>
